<template>
  <div class="bg">
    <div class="body">
      <!-- 顶部复选框 -->
      <CheckBox :checkAllNow="checks.checkAll" :checkedRegionNow="checks.checkedRegion" :isIndeterminateNow="checks.isIndeterminate" :region="checks.region" />

      <!-- 第二排的 地图和指标占比 -->
      <Course1 :map="secondRowData.map" :indicators="secondRowData.indicators" />

      <!-- 第三排的 热力图 -->
      <HeatMap :pieces="thirdRowHeatmap.pieces" :virtul="thirdRowHeatmap.virtul" />

      <!-- 第四排的 排名和词云 -->
      <Course2 :arr="fourthRowData.arr" :wordCloud="fourthRowData.wordCloud" />

      <!-- 第五排的 饼状图和柱状图-->
      <Course3 :studentStage="fifthRowData.studentStage" :histogram="fifthRowData.histogram" />
    </div>
  </div>

</template>

<script>
import CheckBox from '../yanghan/checkBox/index.vue'
import Course1 from '../yanghan/course1/index.vue'
import HeatMap from '../yanghan/heatMap/index.vue'
import Course2 from '../yanghan/course2/index.vue'
import Course3 from '../yanghan/course3/index.vue'
export default {
  components: {
    CheckBox,
    Course1,
    HeatMap,
    Course2,
    Course3
  },
  data() {
    return {
      // 父组件分发数据给子组件：
      // 1、 顶部复选框；全选 和 其他选项 的勾选与否
      checks: {
        checkAll: false,
        checkedRegion: ['华东', '东北'],
        region: ['华东', '华中', '华南', '东北', '西北', '华北'],
        isIndeterminate: true
      },

      // 2、第二排的 地图和指标占比的数据
      secondRowData: {
        // 地图（左）数据
        map: {
          min: 676,
          max: 90104,
          mapdata: [
            { name: '北京', value: this.randomData(676, 90105) }, { name: '天津', value: this.randomData(676, 90105) },
            { name: '上海', value: this.randomData(676, 90105) }, { name: '重庆', value: this.randomData(676, 90105) },
            { name: '河北', value: this.randomData(676, 90105) }, { name: '河南', value: this.randomData(676, 90105) },
            { name: '云南', value: this.randomData(676, 90105) }, { name: '辽宁', value: this.randomData(676, 90105) },
            { name: '黑龙江', value: this.randomData(676, 90105) }, { name: '湖南', value: this.randomData(676, 90105) },
            { name: '安徽', value: this.randomData(676, 90105) }, { name: '山东', value: this.randomData(676, 90105) },
            { name: '新疆', value: this.randomData(676, 90105) }, { name: '江苏', value: this.randomData(676, 90105) },
            { name: '浙江', value: this.randomData(676, 90105) }, { name: '江西', value: this.randomData(676, 90105) },
            { name: '湖北', value: this.randomData(676, 90105) }, { name: '广西', value: this.randomData(676, 90105) },
            { name: '甘肃', value: this.randomData(676, 90105) }, { name: '山西', value: this.randomData(676, 90105) },
            { name: '内蒙古', value: this.randomData(676, 90105) }, { name: '陕西', value: this.randomData(676, 90105) },
            { name: '吉林', value: this.randomData(676, 90105) }, { name: '福建', value: this.randomData(676, 90105) },
            { name: '贵州', value: this.randomData(676, 90105) }, { name: '广东', value: this.randomData(676, 90105) },
            { name: '青海', value: this.randomData(676, 90105) }, { name: '西藏', value: this.randomData(676, 90105) },
            { name: '四川', value: this.randomData(676, 90105) }, { name: '宁夏', value: this.randomData(676, 90105) },
            { name: '海南', value: this.randomData(676, 90105) }, { name: '台湾', value: this.randomData(676, 90105) },
            { name: '香港', value: this.randomData(676, 90105) }, { name: '澳门', value: this.randomData(676, 90105) }
          ]
        },
        // 指标占比（右）数据
        indicators: {
          coreIndex: {
            order: 1311,
            sales: 696208.2
          },
          buyCourse: [
            { value: 159534.34, name: '扩科' },
            { value: 173611.15, name: '新签' },
            { value: 163566.22, name: '活动' },
            { value: 199496.49, name: '续费' }
          ],
        }
      },

      // 3、第三排的 热力图 的数据
      thirdRowHeatmap: {
        // 热力图 图例
        pieces: [
          { min: 27558, max: 32589 },
          { min: 22526, max: 27558 },
          { min: 17494, max: 22526 },
          { min: 12462, max: 17494 }
        ],
        // 热力图数据
        virtul: this.getVirtulData('2020')
      },

      // 4、第四排的排名（左） 和 词云（右）的数据
      fourthRowData: {
        // 排名 数据
        arr: [
          { number: 1, subject: '化学', type: '单次课程', id: '12' },
          { number: 2, subject: '物理', type: '单次课程', id: '12' },
          { number: 3, subject: '语文', type: '单次课程', id: '12' },
          { number: 4, subject: '英语', type: '单次课程', id: '12' },
          { number: 5, subject: '数学', type: '单次课程', id: '12' },
          { number: 6, subject: '数学', type: '单次课程', id: '12' },
          { number: 7, subject: '语文', type: '单次课程', id: '12' },
          { number: 8, subject: '英语', type: '单次课程', id: '12' },
          { number: 9, subject: '化学', type: '单次课程', id: '12' },
          { number: 10, subject: '数学', type: '单次课程', id: '12' },
          { number: 11, subject: '物理', type: '单次课程', id: '12' },
          { number: 12, subject: '生物', type: '单次课程', id: '12' }, {}, {}, {}, {}
        ],
        // 词云（右）的数据
        wordCloud: {
          // 字体大小范围
          sizeRange: [8, 34],
          // 词云数据
          provinces: [
            { name: '北京', value: this.randomData(1, 200) }, { name: '天津', value: this.randomData(1, 200) },
            { name: '上海', value: this.randomData(1, 200) }, { name: '重庆', value: this.randomData(1, 200) },
            { name: '河北', value: this.randomData(1, 200) }, { name: '河南', value: this.randomData(1, 200) },
            { name: '云南', value: this.randomData(1, 200) }, { name: '辽宁', value: this.randomData(1, 200) },
            { name: '黑龙江', value: this.randomData(1, 200) }, { name: '湖南', value: this.randomData(1, 200) },
            { name: '安徽', value: this.randomData(1, 200) }, { name: '山东', value: this.randomData(1, 200) },
            { name: '新疆', value: this.randomData(1, 200) }, { name: '江苏', value: this.randomData(1, 200) },
            { name: '浙江', value: this.randomData(1, 200) }, { name: '江西', value: this.randomData(1, 200) },
            { name: '湖北', value: this.randomData(1, 200) }, { name: '广西', value: this.randomData(1, 200) },
            { name: '甘肃', value: this.randomData(1, 200) }, { name: '山西', value: this.randomData(1, 200) },
            { name: '内蒙古', value: this.randomData(1, 200) }, { name: '陕西', value: this.randomData(1, 200) },
            { name: '吉林', value: this.randomData(1, 200) }, { name: '福建', value: this.randomData(1, 200) },
            { name: '贵州', value: this.randomData(1, 200) }, { name: '广东', value: this.randomData(1, 200) },
            { name: '青海', value: this.randomData(1, 200) }, { name: '西藏', value: this.randomData(1, 200) },
            { name: '四川', value: this.randomData(1, 200) }, { name: '宁夏', value: this.randomData(1, 200) },
            { name: '海南', value: this.randomData(1, 200) }, { name: '台湾', value: this.randomData(1, 200) },
            { name: '香港', value: this.randomData(1, 200) }, { name: '澳门', value: this.randomData(1, 200) }
          ]
        }
      },

      // 5、第五排的 饼状图和柱状图 的数据
      fifthRowData: {
        // 饼状图 数据
        studentStage: [
          { value: 582, name: '初中' },
          { value: 547, name: '小学' },
          { value: 554, name: '高中' }
        ],
        // 柱状图 数据
        histogram: {
          xAxisdata: ['C001', 'C002', 'C003', 'C004', 'C005', 'C006', 'C007', 'C008', 'C009', 'C010'],
          seriesNo: [13, 14, 15, 4, 4, 11, 13, 6, 5, 9],
          seriesYes: [187, 175, 156, 149, 170, 110, 130, 156, 126, 179],
        }
      }
    }
  },
  methods: {
    //取随机数
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    },
    //给中国地图和热力图随机生成数据
    randomData(min, max) {
      return Math.round(this.getRandomInt(min, max));
    },
    // 给热力图随机生成数据
    getVirtulData(year) {
      year = year || '2017';
      var date = +this.$echarts.number.parseDate(year + '-01-01');
      var end = +this.$echarts.number.parseDate(+year + 1 + '-01-01');
      var dayTime = 3600 * 24 * 1000;
      var data = [];
      for (var time = date; time < end; time += dayTime) {
        var d = Math.random() * 100000
        while (d > 32589 || d < 12462) {
          d = Math.random() * 100000
        }
        data.push([
          this.$echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(d)
        ]);
      }
      return data;
    },
  }
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  background-color: #f0f3f4;

  .body {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: auto;
  }
}
</style>